<template>
	<view>
		<u-row customStyle="margin-bottom: 10px">
			<u-col span="12">
				<u--image :showLoading="true" :src="src" width="100%" height="180px"></u--image>
			</u-col>
		</u-row>
		<u-row span="12" class="row_1">
			<span style="font-size: 18px;font-weight: bold;margin-left: 15px;width:30%">隆鼻日记</span>
			<span class="span_1">
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="2">
						<view class="demo-layout bg-purple-light"><u-icon name="photo" color="white"></u-icon></view>
					</u-col>
					<u-col span="9">
						<view class="demo-layout bg-purple" @click="query">查看图集</view>
					</u-col>
				</u-row>
			</span>
		</u-row>
		<u-row span="12" >
			<view v-for="(item, index) in diaryUser" :key="index" >
			<span>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="4" style="margin-left:8%">
						<view class="demo-layout bg-purple">
							<u-avatar :src="src" shape="circle"></u-avatar>
						</view>
					</u-col>
					<u-col span="6">
						<view class="demo-layout bg-purple-light">
							<p style="font-weight: bold;font-size: 14px;">{{item.userName}}</p>
							<p style="font-size: 13px;">共{{diaryList.length}}篇日记</p>
						</view>
					</u-col>
					<u-col span="6">
						<view class="demo-layout bg-purple-dark">
							<button @click="getFollowUserId()" class="span_2" v-for="(item, index) in followUser" :key="index" >{{item.delFlag == 0 ?'已关注':'+关注'}}</button>
							<button @click="getFollowUserId()" class="span_2" v-if="foll" >+关注</button>
						</view>
					</u-col>
				</u-row>
				<u-row>
					<view v-for="(item, index) in diaryList" :key="index" class="view_1">
						#{{item.diaryIds}}
					</view>
				</u-row>
			</span>
		</view>
		</u-row>
		<u-row class="row_2">术前</u-row>
		<u-row>
			<u-scroll-list :indicator="indicator" style="width: 100%;margin-left:5%">
				<view v-for="(item, index) in diaryFile" :key="index"  >
					<div v-for="(file,index) in item.diaryFileId.split(',')" :key="file" style="float:left;margin-left:10px">
						<image :src="file" class="item" style="width:100px;height:100px;" @click="clickImg(item,index)"></image>
					</div>
				</view>
			</u-scroll-list>
		</u-row>
		<u-row class="row_3">
			<u-col span="8" style="font-weight: bold;font-size: 14px;">变美历程</u-col>
			<u-col span="4" style="font-size: 12px;margin-left:10%;">时间正序</u-col>
		</u-row>
		<u-row v-for="(item, index) in diaryList" :key="index" style="font-size: 18px;margin-left:5%;margin-top:10px">
		<u-row style="font-size: 18px;margin-left:0%;margin-top:10px">
			<!-- {{dateFormat(diaryList.diaryRecordTime)}}年 -->
		</u-row>
		</u-row>
		<view class="row_4" style="">
			<view v-for="(item, indexs) in diaryList" :key="item.commentId" v-model="item.commentDiaryRecordId" class="view_2" style="width:100%;height:100%;margin-left:5%">
				<!-- <u-badge numberType="ellipsis" :type="type" max="99" :value="dateFormats(item.diaryRecordTime)"></u-badge> -->
					<view><u-badge :isDot="true" type="success" style="float:left;margin-top:7px"></u-badge></view>
					<view style="">{{dateFormats(item.diaryRecordTime)}}</view>
					<view style="font-size: 13px;width:90%" @click="editBrowse(item)">{{item.diaryRecordContent}}</view>
					<view style="width:96%;height:100%">
						<u-grid :border="false" @click="click" style="margin-left:5%">
							<u-grid-item  v-for="(ele,index) in item.url" :key="ele.ids" style="width:95px;height:95px">
								<img style="width:90px;height:50px:" :src="ele" @click="clickImg(item,index)"></img>
								<!-- <div v-for="ele in items.filePath.split(',')">
									<img style="width:90px;height:50px:" :src="ele"></img>
								</div> -->
							</u-grid-item>
						</u-grid>
						<u-toast ref="uToast"/>
					</view>
				<view style="margin-top:15px">
					<u-row customStyle="margin-bottom: 10px">
					<u-col span="2">
						<view class="demo-layout bg-purple">
							<u-row>
								<u-col span="2">
									<u-icon name="eye" color="#575757" size="18"></u-icon>
								</u-col>
								<u-col span="2" style="margin-left:10px;font-size: 14px;">
									{{item.diaryRecordBrowse}}
								</u-col>
							</u-row>
						</view>
					</u-col>
					<u-col span="2">
						<view class="demo-layout bg-purple-light">
							<p class="el-icon-thumb" v-show="item.kudosWhether == 0">
							    <u-icon name="heart-fill" color="#575757" size="18" style="float:left" @click="like(item)"></u-icon>
								<span style="margin-left:6px;font-size:10px;">{{item.diaryRecordWhether}}</span>
							</p>
							<p class="el-icon-thumb comment_thumbsUp"  v-show="item.kudosWhether == 1 || item.kudosWhether == null">
							   <u-icon name="heart" color="#575757" size="18" style="float:left" @click="like(item)"></u-icon>
								<span style="margin-left:6px;font-size:10px;">{{item.diaryRecordWhether}}</span>
							</p>
<!-- 							<u-icon :name="icons" color="#575757" size="18" style="" @click="like(item)"></u-icon>
							{{item.diaryRecordWhether}} -->
						</view>
					</u-col>
					<u-col span="2">
						<view class="demo-layout bg-purple-dark">
							<u-icon name="chat" color="#575757" size="18" style="float:left;margin-top:2px" @click="editPL(item)"></u-icon>
							<span style="font-size: 14px;">{{item.diaryRecordNumber}}</span>
						</view>
					</u-col>
					</u-row>
					
					<u-row >
						<div>
						<u-popup :show="show" mode="bottom" @close="close" @open="open"  overlayOpacity="0.2" >
							<div style="position: fixed;width:100%;height:50px;text-align: center;background:white;z-index: 2000">
								<text style="">评论列表</text>
							</div>
							<scroll-view style="width:100%;height:500px"  scroll-y="true" >
								<view class="comments" style="margin-top:50px"  v-if="commentById.length>0">
								<view class="comments-items" v-for="(item, index) in commentById" :key="index" >
									<image :src="item.userFileId" class="comments-face" style="font-size: 15px;"></image>
									<view class="comments-body">
										<view class="comments-header" >{{item.userName}}</view>
										<view class="comments-content" style="font-size: 14px;">
											{{item.commentContent}}
											<text class="comments-replay-btn" style="margin-left:70%;" @click="replay(item)">回复</text>
										</view>
										<view class="comment_see" style="margin-top:10px">
											<text class="comment_seeP" v-if="item.childs.length != 0 " style="font-size: 14px;" @click="seeComment(item)">展开回复</text>
										</view>
										<text class="grey" style="font-size: 24rpx;">{{dateFormats1(item.commentTime)}}</text>
										<view class="comments-reply" >
											<p class="el-icon-thumb" v-show="item.kudosWhether == 0">
											    <u-icon name="heart-fill" color="#575757" size="18" style="float:left" @click="likes(item)"></u-icon>
												<span style="margin-left:6px;font-size:10px;">{{item.kudosNum}}</span>
											</p>
											<p class="el-icon-thumb comment_thumbsUp"  v-show="item.kudosWhether == 1 || item.kudosWhether == null">
											   <u-icon name="heart" color="#575757" size="18" style="float:left" @click="likes(item)"></u-icon>
												<span style="margin-left:6px;font-size:10px;">{{item.kudosNum}}</span>
											</p>
											<view class="reply">
												<view class="comments-items " v-for="(item2, index2) in item.childs" :key="index2" >
													<div v-show="item2.commentPid === seeCommentId">
													<image :src="item2.userFileId" class="comments-face"></image>
													<view class="comments-body" >
														<view class="comments-header">
															{{item2.userName}}
															<template v-if="item.commentContent">
																<svg t="1600674701420" class="icon reply-more-icon-rotate" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
																 p-id="3631" width="14" height="14">
																	<path d="M113.27683429 155.94627634l799.4199333 0c44.24124361 0 80.02419363 35.50497793 80.02419365 79.74225054 0 20.57390573-7.89043628 39.17023849-20.57390572 53.25945242l-395.33984827 527.4996929c-26.49074017 34.93712067-76.36290417 42.2676418-111.58990998 15.78087266-6.20274865-4.5110899-11.55172587-9.86403813-15.78087266-15.78087266L49.59342845 283.31308797c-26.20482607-34.9410917-19.15624802-85.09519879 16.0628158-111.30399583C80.03137236 161.01728144 96.65410329 155.94627634 113.27683429 155.94627634L113.27683429 155.94627634z"
																	 p-id="3632" fill="#B7B7B7"></path>
																</svg>
																{{item.userName}}
															</template>
														</view>
														<view class="comments-content">
															{{item2.commentContent}}
														</view>
													</view>
													<p class="el-icon-thumb" v-show="item2.kudosWhether == 0">
													    <u-icon name="heart-fill" color="#575757" size="18" style="float:left" @click="likes(item2)"></u-icon>
														<span style="margin-left:6px;font-size:10px;">{{item2.kudosNum}}</span>
													</p>
													<p class="el-icon-thumb comment_thumbsUp"  v-show="item2.kudosWhether == 1 || item.kudosWhether == null">
													   <u-icon name="heart" color="#575757" size="18" style="float:left" @click="likes(item2)"></u-icon>
														<span style="margin-left:6px;font-size:10px;">{{item2.kudosNum}}</span>
													</p>
													<view class="comments-info">
														<text class="grey" style="font-size: 24rpx;">{{dateFormats1(item2.commentTime)}}</text>
														<text class="comments-replay-btn" style="font-size: 13rpx;" @click="replay(item)">回复</text>
													</view>
													</div>
												</view>
											</view>
											<u-tabbar
												style="height:0px"
												:value="value6"
												@change="name => value6 = name"
												:fixed="true"
												:placeholder="true"
												:safeAreaInsetBottom="true"
											>
											<u-button style="border-radius: 20px 20px 20px;" @click="saveshows(item)" >添加评论...</u-button>
											</u-tabbar>
										</view>
								
											<view class="comments-more">
												<u-row class="comment_stow" v-if="item.commentId === stowCommentId">
												    <p class="comment_stowP" @click="stowSecondLevelComment">收起</p>
												</u-row>
											</view>
										</view>
									</view>
								</view>
								<view class="comment_input">
										
								</view>
								<u-popup :show="shows" mode="bottom"  @close="closes" @open="open">
									  <view>
										<u--textarea v-model="commenText"  @change="change" placeholder="请输入内容" border="bottom" :show="shows"></u--textarea>
										<u-button v-show="isShowf" style="border-radius: 20px 20px 20px;width:100px;float:right" @click="saveComment(item)">发布</u-button>
										<u-button v-show="isShowh" style="border-radius: 20px 20px 20px;width:100px;float:right" @click="saveReplyComment(item)">回复</u-button>
									  </view>
								</u-popup>
							</scroll-view>
						</u-popup>
						</div>
					</u-row>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 收起评论id
				stowCommentId:0,
				// 查看评论id
				seeCommentId: 0,
				// 默认收起为false
				stow: false,
				// 评论id
				commentId: 0,
				icons: 'heart',
				// 底部导航栏
				value6: 0,
				// 评论输入框 弹窗
				shows: false,
				// 评论内容
				commenText: '',
				// 评论列表 弹窗
				show: false,
				imgUrl: 'http://c.svner.cn/19.jpg',
				type:"warning",
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				indicator: false,
				list: [{
					thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/5.jpg"
				}],
				title:[
				  {
					user_id:"0",
					likes:"1"
				  }
				],
				// 日记本用户
				diaryUser: [],
				// 新增评论对象
				commentc: {},
				// id查询日记
				id: "",
				// 查询日记
				diaryList: [],
				// 日记本图片
				diaryFile: [],
				// 查询评论
				commentById: [],
				isShowh: false,
				isShowf: false,
				videoTalkVoList: {},
				kudosDictionaries: 0,
				// 点赞
				kudosNum: {},
				// 查询点赞
				kudosById:[],
				// 关注
				followUser:[],
				foll: true
				
			}
		},
		onLoad(option) {
			this.id = option.id
			// 查询日记
			this.getDiaryById()
			// 查询日记本图片
			this.getdiaryFile()
			// 查询日记本用户
			this.getdiaryUser()
			//查询关注
			this.getFollowUser()
			// this.WebSocket()
		},
		mounted() {
		},
		methods: {
			// WebSocket(){
			// 	var websocket = null
			// 	var that = this
			// 	if('WebSocket' in window) {
			// 		websocket = new WebSocket('ws://localhost:8003/contents/webSocket')
			// 	}else {
			// 		alert('该浏览器不支持webSocket!')
			// 	}
			// 	//建立连接
			// 	websocket.onopen = function (event) {
			// 		console.log('建立连接')
			// 	},
			// 	//收到消息
			// 	websocket.onmessage = function (event){
			// 		console.log('收到消息：' + event.data)
			// 		//弹窗提醒，播放音乐都行
			// 		that.topicLabelbyidNum = event.data
			// 		alert(that.topicLabelbyidNum)
			// 	},
			// 	//连接关闭
			// 	websocket.onclose = function (event) {
			// 		console.log('连接关闭')
			// 	},
			// 	//webSocket通信发送错误
			// 	websocket.onerror = function (){
			// 		alert('webSocket通信发送错误！')
			// 	},
			// 	window.onbeforeunload = function (){
			// 		websocket.close()
			// 	}
			// },
			// 图片浏览
			clickImg(item,index) {
				wx.previewImage({
					urls: item.url, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: index, // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
					// 下面我这边做的都是默认的选择
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {},
							fail: function(err) {
				
							}
						}
				})
			},
			// 图片展示跳转
			query(){
				uni.navigateTo({
					url: '../index/atlasList?id='+ this.id
				})
			},
			//查询关注
			getFollowUser(){
				var userId = uni.getStorageSync('administrator').userId
				this.$axios({
					url: '/contents/getFollowUser?id=' + this.id +"&userId="+userId,
					method: 'get',
					success: (res) => {
						if (res.data.code === 200) {
							this.followUser = res.data.object
							if( res.data.object !==undefined &&  res.data.object.length > 0 ){
								this.foll = false
							}
						}
					}
				})
			},
			//新增关注
			getFollowUserId(){
				var userId = uni.getStorageSync('administrator').userId
				this.$axios({
					url: '/contents/getFollowUserId?id=' + this.id +"&userId="+userId,
					method: 'get',
					success: (res) => {
						if (res.data.code === 200) {
							this.getFollowUser()
						}
					}
				})
			},
			// 查询点赞
			like(item){
				this.kudosNum.kudosUserId =  uni.getStorageSync('administrator').userId
				this.kudosNum.kudosDictionaries = 1
				this.kudosNum.kudosWholeId = item.dailyRecordId
				uni.request({
					url: "http://localhost:8090/contents/getKudosById/" + this.kudosNum.kudosWholeId +"/"+this.kudosNum.kudosDictionaries+"/"+this.kudosNum.kudosUserId,
					method: 'get',
					dataType: 'json',
					success: (res) => {
						if(res.data.code === 200){
							this.getDiaryById()
						}
						// if(res.data.object.object === "200"){
						// 	this.icons = 'heart'
						// }else if(res.data.object.object === "201"){
						// 	this.icons = 'heart-fill'
						// }else{
						// 	this.icons = 'heart-fill'
						// }
						// this.kudosById = res.data.object	
					},     
				});	
			},
			
			// 点赞
			likes(item, index) {
				this.kudosNum.kudosUserId =  uni.getStorageSync('administrator').userId
				this.kudosNum.kudosDictionaries = 3
				this.kudosNum.kudosWholeId = item.commentId
				item.commentDiaryRecordId
				uni.request({
					url: "http://localhost:8090/contents/getCommentKudosById/" + this.kudosNum.kudosWholeId +"/"+this.kudosNum.kudosDictionaries+"/"+this.kudosNum.kudosUserId+"/"+item.commentDiaryRecordId,
					method: 'get',
					dataType: 'json',
					success: (res) => {
						if(res.data.code === 200){
							this.getCommentById()
						}
					},     
				});	
			},
			// 收起二级评论
			stowSecondLevelComment(){
			    this.seeCommentId = 0
			    this.stowCommentId = 0
			    this.stow = false
			},
			// 点击查看评论时
			seeComment(item){
			    this.stowCommentId = item.commentId
			    this.seeCommentId = item.commentId
			},
			replay(item){
				this.shows = true
				this.isShowh = true
				this.isShowf = false
				this.commentc.commentPid = item.commentId
				this.commentc.commentDiaryRecordId=item.commentDiaryRecordId
				// console.log(replayName);	
			},
			// replays(item2){
			// 	this.shows = true
			// 	this.isShowh = true
			// 	this.isShowf = false
			// 	this.commentc.commentPid = item2.commentId
			// 	this.commentc.commentDiaryRecordId=item2.commentDiaryRecordId
			// },
		   open() {
		   },
		   // 关闭评论列表
		   close() {
			this.show = false
		   },
		   // 关闭输入评论
		    closes() {
			this.shows = false
			},
			click(name) {
				this.$refs.uToast.success(`点击了第${name}个`)
			},
			// 添加评论按钮
			saveshows(item){
				this.shows = true
				this.isShowf = true
				this.isShowh = false
				this.commentc.commentDiaryRecordId=item.commentDiaryRecordId
			},
			// 新增回复评论
			saveReplyComment(item){
				this.commentc.commentContent = this.commenText
				this.commentc.commentPid
				this.commentc.commentDictionaries = '1'
				this.commentc.commentDiaryRecordId
				this.$axios({
					url: '/contents/saveComment',
					method: 'post',
					data: JSON.stringify(this.commentc),
					success: (res) => {
						if (res.data.code === 200) {
							this.getDiaryById()
							this.getCommentById()
							this.commentc = {}
							this.commenText = ''
						}
					}
				})
			},
			// 点击评论图标弹窗
			editPL(item){
				this.show = true
				this.commentc.commentDiaryRecordId=item.dailyRecordId
				this.getCommentById(item)
			},
			// 查询日记评论
			getCommentById(item){
				this.commentById = []
				this.commentc.commentDictionaries = '1'
				var userId = uni.getStorageSync('administrator').userId
				this.$axios({
					url: '/contents/getCommentById?id=' + this.commentc.commentDiaryRecordId +"&commentDictionaries="+this.commentc.commentDictionaries+"&userId="+userId,
					method: 'get',
					success: (res) => {
						if (res.data.code === 200) {
							this.commentById = res.data.object
						}
					}
				})
			},
			// 新增评论
			saveComment(){
				this.commentc.commentContent = this.commenText
				this.commentc.commentDictionaries = '1'
				this.commentc.commentDiaryRecordId
				this.commentc.commentPid = 0
				this.$axios({
					url: '/contents/saveComment',
					method: 'post',
					data: JSON.stringify(this.commentc),
					success: (res) => {
						if (res.data.code === 200) {
							// this.getDiaryById()
							this.getCommentById()
							this.commenText = ''
						}
					}
				})
			},
			// 查询日记
			getDiaryById(e){
				var userId = uni.getStorageSync('administrator').userId
				uni.request({
					url: "http://localhost:8090/contents/getDailyRecordById?id=" + this.id +"&userId="+userId,                
					method: 'get',
					dataType: 'json',
					success: (res) => {
						this.diaryList = res.data.object
					},                  
				});
			},
			// 查询日记本图片
			getdiaryFile(e){
				uni.request({
					url: "http://localhost:8090/contents/getdiaryFile/" + this.id,                
					method: 'get',
					dataType: 'json',
					success: (res) => {
						this.diaryFile = res.data.object
					},                  
				});
			},
			// 查询日记本用户
			getdiaryUser(e){
				uni.request({
					url: "http://localhost:8090/contents/getdiaryUser/" + this.id,                
					method: 'get',
					dataType: 'json',
					success: (res) => {
						this.diaryUser = res.data.object
					},                  
				});
			},
			// 浏览量
			editBrowse(item){
				this.$axios({
					url: '/contents/editDailyRecordBrowse',
					method: 'post',
					data: JSON.stringify(item),
					success: (res) => {
						if (res.data.code === 200) {
							this.getDiaryById()
							uni.navigateTo({
								url: '../index/commentList?dailyRecordId='+ item.dailyRecordId
							})
						}
					}
				})
			},
			getUserInfo(e){
			    let index = e.currentTarget.dataset.index
			    let that = this
			    let likes = e.currentTarget.dataset.likes
			    let titles = this.data.title
			    if (likes==1){
			      titles[index].likes = '0'
			      that.setData({
			        title: titles
			      })
			      console.log(e.currentTarget.dataset.index,"关注了")
			    }else{
			      titles[index].likes = 1
			      that.setData({
			        title: titles
			      })
			      console.log(e.currentTarget.dataset.index, "取关了")
			    }
			  },
			  // 设置时间格式
			  dateFormat(time) {
			      var date=new Date(time);
			      var year=date.getFullYear();
			  	/* 在日期格式中，月份是从0开始的，因此要加0
			  	* 使用三元表达式在小于10的前面加0，以达到格式统一 如 09:11:05
			  	* */
			      var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
			      var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
			      var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
			      var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
			      var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
			  	// 拼接
			      return year;
			  },
			  // 设置时间格式s
			  dateFormats(time) {
			      var date=new Date(time);
			      var year=date.getFullYear();
			  	/* 在日期格式中，月份是从0开始的，因此要加0
			  	* 使用三元表达式在小于10的前面加0，以达到格式统一 如 09:11:05
			  	* */
			      var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
			      var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
			      var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
			      var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
			      var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
			  	// 拼接
			      return month+"-"+day;
			  },
			  // 设置时间格式s
			  dateFormats1(time) {
			      var date=new Date(time);
			      var year=date.getFullYear();
			  	/* 在日期格式中，月份是从0开始的，因此要加0
			  	* 使用三元表达式在小于10的前面加0，以达到格式统一 如 09:11:05
			  	* */
			      var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
			      var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
			      var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
			      var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
			      var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
			  	// 拼接
			      return year+"-"+month+"-"+day+" "+hours+":"+minutes
			  }
			
		}
	}
</script>

<style  lang="less">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}
	.comment_seeP:hover{
	    color:#31c27c;
	}
	.comment_seeP{
	    color: #999;
	    font-size:14px;
	    cursor: pointer;
	}
	.comment_see{
	}
	.row_1 {
		background-color:rgba(95,95,95,0.9);
		height: 45px;
		width: 100%;
		color: white;
		position: absolute;
		top: 135px;
/* 		opacity:0.6;  */
	}
	.row_2{
		font-weight: bold;
		font-size: 14px;
		margin-left: 5%;
		margin-top:20px;
		margin-bottom: 10px;
	}
	.span_1{
		margin-left: 45%;
		border-radius: 20px 20px 20px;
		background-color:rgba(59,59,59,0.7);
		font-size: 14px;
		height: 22px;
		width: 25%;
		line-height: inherit;
		text-align: center;
	}
	.span_2{
		margin-left: 98%;
		height: 25px;
		width: 80px;
		border-radius: 20px 20px 20px;
		line-height: 180%;
		background-color: #3B3B3B;
		color: white;
		font-size: 13px;
	}
	.img_1{
		margin-left: 20px;
		width: 80px;
		height: 80px;
	}
	.view_1{
		margin-left: 10%;
		margin-top:5px;
		border-radius: 20px 20px 20px;
		background-color:rgba(242,242,242,0.7);
		font-size: 14px;
		line-height: inherit;
		text-align: center;
	}
	.row_3{
		margin-left:5%;
		margin-top:5%
		
	}
	.row_4{
		margin-left:0%;
		margin-top:10px;
		width: 100%;
		height: 100%;
	}
	.view_2{
		width: 50%;
		height: 100px;
	}
	.grey {
			color: #999999;
		}
	
		.common_flex {
			display: flex;
			font-weight: ;
		}
	
		.comments {
	
			.comments-items {
				display: flex;
				margin-bottom: 32rpx;
				margin-left: 10%;
	
				.comments-face {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
	
				.comments-body {
					width: calc(100% - 100rpx);
					padding-left: 16rpx;
	
					.comments-header {
						margin-top: 8rpx;
						margin-bottom: 8rpx;
						color: #8D8C91;
						font-weight: bold;
					}
	
					.comments-info {
						margin-top: 8rpx;
	
						.comments-replay-btn {
							color: #8E8D95;
							margin-left: 32rpx;
							font-weight: bold;
							letter-spacing: 2rpx;
						}
					}
	
					.comments-reply {
						margin-top: 16rpx;
					}
	
					.comments-more {
						margin-top: 8rpx;
						color: #999999;
						word-spacing: 10rpx;
						display: flex;
						align-items: center;
	
						.comments-more-icon {
							margin-left: 8rpx;
	
						}
	
						.comments-more-icon-rotate {
							transform: rotate(180deg);
						}
					}
				}
	
			}
		}
	
	
		.reply {
	
			.comments-items {
				margin-bottom: 8rpx;
	
				.comments-face {
					width: 70rpx;
					height: 70rpx;
				}
	
				.comments-body {
					.comments-header {
						font-size: 26rpx;
						display: flex;
						align-items: center;
	
						.reply-more-icon-rotate {
							transform: rotate(270deg);
							width: 24rpx;
							height: 24rpx;
							margin: 0 6rpx;
						}
					}
	
	
	
					.comments-content {
						font-size: 26rpx;
					}
	
					.comments-info {
						margin-top: 8rpx;
	
						.comments-replay-btn {
							font-size: 26rpx;
						}
					}
	
	
				}
	
			}
		}

</style>